<template>
  <div class="page">
    <span v-if="page.pageCurrent > 1" class="ipg" @click="pageClickGo(page.pageCurrent - 1)">« 上一页</span>
    <template v-if="page.totalPage > 1">
      <span
        v-for="(item, index) in _setPage()"
        :key="index"
        class="ipg"
        :class="item == page.pageCurrent ? 'active' : ''"
        @click="pageClick(item)"
      >{{ item }}</span>
    </template>
    <span v-if="page.pageCurrent < page.totalPage" class="ipg" @click="pageClickGo(page.pageCurrent + 1)">下一页 »</span>
    <span class="page_total">共<b>{{ page.totalCount }}</b>条</span>
    <span v-if="page.pageCurrent < page.totalPage" class="page_goto">
      <input id="page-num-gotoPage" v-model="targetPage" class="page" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" @keydown.enter.stop="pageClickGo(targetPage)">
      <span id="go-page-gotoPage" class="go-page" @click="pageClickGo(targetPage)">GO</span>
    </span>
  </div>
</template>
<script>
export default {
  props: {
    page: {
      type: [Object, Array],
      default() {
        return []
      }
    }
  },
  data() {
    return {
      targetPage: null
    }
  },
  methods: {
    _setPage() {
      const data = this.page
      let count = 5
      let start = 1
      let yb = Math.round(count / 2)
      const pageData = []
      pageData.push(1)
      // 实际页数少于或等于限制总数
      if (data.totalPage <= count) {
        count = data.totalPage
        yb = 0
      }
      if (data.pageCurrent > 3 && yb) {
        start = data.pageCurrent - 2
        // pageData.push('...')
      }
      if (data.totalPage - data.pageCurrent <= 3 && yb) {
        start = data.totalPage - 4
      }
      for (var i = 1; i < count - 1; i++) {
        pageData.push(start + i)
      }
      if (data.totalPage - data.pageCurrent > 3 && yb) {
        // pageData.push('...')
      }
      pageData.push(data.totalPage)
      return pageData
    },
    pageClick(event) {
      this.$emit('btnClick', event)
    },
    pageClickGo(targetPage) {
      targetPage = Number(targetPage)
      if (targetPage >= 1 && targetPage <= this.page.totalPage) {
        this.pageClick(targetPage)
      }
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.page {
  //margin-top: 30px;
  text-align: center;
  .ipg {
    display: inline-block;
    //width: 56px;
    text-align: center;
    line-height: 26px;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    cursor: pointer;
  }
  .active {
    background-color: #4269c9;
    color: #fff;
    border-color: #4269c9;
  }

  .page_total {
    display: inline-block;
    font-size:13px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .page_total > b {
    color: #666;
    font-weight: normal;
    padding: 0 5px;
    vertical-align: baseline;
  }

  span.page_goto {
    display: inline-block;
    vertical-align: middle;
  }

  input {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ddd;
    border-right:none;
    height: 28px;
    text-align: center;
    width: 40px;
    border-radius: 3px 0 0 3px;
    float: left;
    outline: none;
  }

  .go-page {
    background: #4269c9;
    border: 1px solid #4269c9;
    color: #fff;
    height: 28px;
    line-height: 28px;
    text-align: center;
    vertical-align: middle;
    width: 28px;
    cursor: pointer;
    border-radius: 0 3px 3px 0;
    float: left;
  }
}
</style>
